<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            overflow: hidden;
        }
        .box{
            width: 509px;
            height: 270px;
            /*border: 1px solid #000;*/
            margin:100px 0;

            animation:move 6s infinite;
        }

        .fish{
            width: 100%;
            height: 100%;
            background: url(image/shark1.png) no-repeat 0px 0px;
            /*背景图片切换的动画*/
            animation:bg 0.8s steps(7) infinite;
        }

        /*逻辑分离*/
        @keyframes bg {
            0%{
                background-position: 0 0 ;
            }

            100%{
                background-position: 0 -1890px;
            }
        }

        @keyframes move {
            0%{
                transform:translateX(-600px);
            }

            100%{
                transform:translateX(1400px);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fish"></div>
    </div>
</body>
</html>